<template>
  <el-card class="box-card">
    <template #header>
      <!-- 
        type="primary"  蓝色经典按钮
        icon 渲染图标
       -->
      <el-button type="primary" :icon="Plus" @click="trademarkAdd"
        >添加</el-button
      >
    </template>
    <!-- 
      data 表格渲染的数据
      border 带边框
     -->
    <!-- 表单组件 -->
    <el-table v-loading="loading" :data="trademarkList" border>
      <!-- 
        el-table-column 列
           prop 这一列决定要渲染data数据中哪个字段
           label 列的标题
           width 列的宽度
           type="index" 显示从1开始的序号
           align="center" 文字居中
       -->
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="tmName" label="品牌名车" sortable />
      <el-table-column label="品牌LOGO" sortable>
        <template v-slot="{ row }">
          <img :src="row.logoUrl" :alt="row.tmName" class="trademark-img" />
        </template>
      </el-table-column>
      <el-table-column label="操作" sortable>
        <!-- 
          列要渲染的内容有两种方式指定:
             1.prop="xxx" 将来数据xxx就会渲染到当前列
             2.默认插槽,插槽的内容就是要渲染的内容
              当默认插槽prop="xxx" 同时指定时,默认插槽优先级更高,默认插槽生效
         -->
        <template v-slot="{ row }">
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            @click="trademarkRevise(row)"
          />
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            @click="trademarkDelete(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 
      分页器组件
        currentPage    当前页码
        page-size      每页条数
        page-sizes     每页条数的选项
        small     是否渲染小组件
        layout    要加载的组件
          total, 总数
          sizes, 每页条数的选项
          prev, 前翻页
          pager, 显示页码
          next, 后翻页
          jumper 快速跳转至某页面
          -> 让内容去右边
        total 总数

      @size-change  当page-size发生改变的时候触发   
          先更新page-size的值,再触发时间
          因为v-model双向数据绑定的属性,所以当前组件的pageSzie的值也更新了,然后触发的事件
      @current-change 当currentPage发生改变的时候触发
     -->
    <!-- 分页器ui组件 -->
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout=" prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @size-change="getTrademarkList"
      @current-change="getTrademarkList"
    />
    <!-- <el-pagination style="margin-top: 20px; text-align: center;" v-model:currentPage="5" v-model:page-size="pageSize4"
      :page-sizes="[3, 6, 9]" :total="100" layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="handleSizeChange" @size-change="handleCurrentChange" /> -->

    <!-- 添加功能ui组件  开始-->
    <el-dialog v-model="Visible" :title="ruleForm.reminderName">
      <!-- <el-dialog v-model="Visible" title="123"> -->
      <!-- 

        
       -->
      <el-form
        label-width="100px"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        :label="ruleForm.reminderName"
      >
        <!-- <el-form label-width="100px" ref="ruleFormRef" :model="ruleForm" :rules="rules" label="16"> -->
        <el-form-item label="品牌名称" prop="brandName">
          <el-input class="trademark-input" v-model="ruleForm.brandName" />
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="pictureVerification">
          <!-- 
              action 上传的服务器地址
              /admin/product/fileUpload  会返送本地服务器请求,本地开发服务器不能处理上传图片的请求

              http://gmall-h5-api.atguigu.cn/admin/product/fileUpload  真实开发会产生跨域(现在不会 因为服务器设置的cosr 请求头白名单)

              /app-dev/admin/product/fileUpload  走代理服务器 解决跨域
              
              必须动态读取请求前缀  proxyPath(这是设置全局环境变量.env文件中的全局变量 获取方式:import.meta.env.VITE_API_URL;) + '/admin/product/fileUpload'

              show-file-list 是否跨域上传多张图片
              on-success 上传成功触发的函数
              before-upload 上传之前触发的函数

           -->
          <el-upload
            class="avatar-uploader"
            :action="proxyPath + '/admin/product/fileUpload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip text-red">
                只能上传jpg/png文件，且不超过50kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="Visible = false">取消</el-button>
          <el-button type="primary" @click="addOrUpdate">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加功能ui组件  结束-->
  </el-card>
</template>

<script lang="ts">
export default {
  name: "LTrademark",
};
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ref, onMounted, reactive } from "vue";
import { useTrademarkStore } from "@/stores/modules/trademark";
import {
  getTrademarkListApi,
  saveTrademarkApi,
  deleteTrademarkApi,
  putTrademarkApi,
} from "@/Api/product/trademark";
import type { TrademarkList, Putdatets } from "@/Api/product/model/trademark";
import { ElMessage, ElMessageBox, type UploadProps } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import axios from "axios";

// import axios from 'axios'
// 当前页码
const currentPage = ref(1);
// 数据总条数
const total = ref(0);
const background = ref(false);
// 每页显示几条数据

const disabled = ref(false);
const small = ref(false);
const pageSize = ref(5);

const loading = ref(false);

// 品牌管理页面的添加功能的点击事件 是否弹出对话框进行添加数据
const Visible = ref(false);

/****************** 品牌管理 添加功能校验  开始 ********************* */
// FormInstance类型是联合类型，可能有值，可能为undefined
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  // 添加功能的品牌名称
  brandName: "",
  pictureVerification: "",
  reminderName: "",
});
const rules = reactive<FormRules>({
  brandName: [
    { required: true, message: "品牌名字一定要填", trigger: "blur" },
    { min: 3, max: 5, message: "你输入的品牌名字格式有误", trigger: "blur" },
  ],
  pictureVerification: [{ required: true, message: "请上传品牌LOGO" }],
});
/****************** 品牌管理 添加功能校验  结束 ********************* */

/*********************** 上传图片代码   开始  **********************/

// 获取代理路径并且上路径 经过代理服务器代理请求
const proxyPath = import.meta.env.VITE_API_URL;

// 定义合法的图片类型数组
const imageTypes = ["image/jpeg", "image/jpg", "image/png"];

// 是否有这个图片有就显示 这是是路劲有就显示 没有就不显示
const imageUrl = ref("");

// 上传成功触发的函数
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => {
  // response, 上传服务器响应的内容
  imageUrl.value = response.data;

  ruleForm.pictureVerification = imageUrl.value;
  // 上传成功，清空图片表单失败信息
  ruleFormRef.value?.clearValidate(["pictureVerification"]);
};

// 上传之前触发的函数:  限制图片的大小和类型  是否放行给上传 发送上传请求
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  /*
    rawFile  上传的文件
     rawFile.type 上传的文件类型
    http协议规定的文件格式：mineType
      js    application/js
      css   text/css
      html  text/html
      json  application/json
      图片  image/jpeg image/jpg image/png image/gif
  */
  if (!imageTypes.includes(rawFile.type)) {
    ElMessage.error("上传的图片必须是jpg或png,jpeg格式!");
    return false;
  } else if (rawFile.size / 1024 > 200) {
    ElMessage.error("上传的图片不能超过200kb");
    return false;
  }
  // 是否返送请求放行
  return true;
};

/*********************** 上传图片代码   结束  **********************/

// 页码发生改变的触发方式一:
// const handleSizeChange = (val: number) => {
//   pageSize.value = val
//   getTrademarkList()
// }
// const handleCurrentChange = (val: number) => {
//   currentPage.value = val
//   getTrademarkList()
// }

let trademarkList = ref<TrademarkList>([]);

/****************** 获取品牌列表的数据请求封装  开始 ****************** */
const getTrademarkList = async () => {
  // loading效果开始
  loading.value = true;
  // 发送获取分页列表请求
  const res = await getTrademarkListApi(currentPage.value, pageSize.value);
  // 更新状态
  (trademarkList.value = res.records), (total.value = res.total);
  // loading效果结束
  loading.value = false;
  ElMessage({
    message: "更新数据成功",
    type: "success",
  });
};
/****************** 获取品牌列表的数据请求封装 结束 ****************** */

// 添加弹窗的取消按钮触发事件
const trademarkAdd = () => {
  Visible.value = true;
  imageUrl.value = "";
  ruleForm.brandName = "";
  ruleFormRef.value?.clearValidate();
  ruleForm.reminderName = "添加品牌";
};

const brandId = ref(0);
// 添加功能的确定发送请求事件
const addOrUpdate = () => {
  ruleFormRef.value?.validate(async (valid) => {
    // ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      // valid为true，代表校验通过，才能发送请求完成功能
      console.log("表单校验通过");
      getTrademarkList();
      if (ruleForm.reminderName == "添加品牌") {
        await saveTrademarkApi(ruleForm.brandName, imageUrl.value);
      } else {
        // {
        //   "id": 0,
        //   "logoUrl": "string",
        //   "tmName": "string"
        // }
        const tm = {
          id: brandId.value,
          logoUrl: imageUrl.value,
          tmName: ruleForm.brandName,
        };
        await putTrademarkApi(tm);
        // console.log(result);
        ElMessage({
          type: "success",
          message: "修改成功!",
        });
        // if (result.code)
        //   ElMessage({
        //     type: 'success',
        //     message: '删除成功!'
        //   })
        //   getTrademarkList()
        // }).catch (() => {
        //   ElMessage({
        //     type: 'success',
        //     message: '删除失败!'
        //   })
        // })
      }
      getTrademarkList();
      Visible.value = false;
      imageUrl.value = "";
    }
    // 校验失败，进行错误提示，自动提示错误
  });
};

// 挂载声明周期发送获取品牌管理分页数据请求  方式一:
// onMounted(() => {
//   getTrademarkList()
// })
// 挂载声明周期发送获取品牌管理分页数据请求  方式二:
onMounted(getTrademarkList);

interface Row {
  tmName: string;
  id: number;
  logoUrl: string;
}

// 品牌管理页面表格数据的删除功能
const trademarkDelete = (row: Row) => {
  // console.log(id);
  ElMessageBox.confirm(`确定删除 ${row.tmName} 吗?`, "提示", {
    type: "warning",
  })
    .then(async () => {
      await deleteTrademarkApi(row.id);
      // 如果成功了, 提示成功, 重新获取列表(哪一页?)
      ElMessage({
        type: "success",
        message: "删除成功!",
      });
      getTrademarkList();
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "删除失败!",
      });
    });
};
// 品牌管理页面表格数据的修改功能
const trademarkRevise = (row: Row) => {
  brandId.value = row.id;
  ruleForm.brandName = row.tmName;
  imageUrl.value = row.logoUrl;
  Visible.value = true;
  ruleForm.reminderName = "修改品牌";
  ruleFormRef.value?.clearValidate();
};
</script>

<!-- 局部组件样式开始  -->

<style scoped>
.trademark-img {
  width: 150px;
  height: 100px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 删除成功提示框 */
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}

/* 删除成功提示框 */
</style>
<!-- 局部组件样式结束 -->

<!-- 全局导入总样式开始  -->
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<!-- 全局导入总样式结束  -->
